<!--  -->
<template>
  <div>
      <div class="docker">
        <div class="docker__item"
          v-for="(item, index) in bottomList"
          :key="item.icon"
          :class="{'docker__item': true, 'docker__item_active': index === 0}">
            <div class="iconfont" v-html="item.icon" />
            <div class="docker__title">{{ item.text }}</div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Bottom',
  data () {
    return {
      bottomList: [
        {
          icon: '&#xf12d;',
          text: '首页'
        },
        {
          icon: '&#xf0f5;',
          text: '购物车'
        },
        {
          icon: '&#xe62d;',
          text: '订单'
        },
        {
          icon: '&#xf12a;',
          text: '我的'
        }]
    }
  }
}
</script>
<style lang='scss' scoped>
@import '../../style/variable.scss';
.docker {
    display: flex;
    box-sizing: border-box;
    position: fixed;
    padding: 0 .18rem;
    left:0;
    bottom:0;
    width: 100%;
    height: .5rem;
    background-color: #fff;
    border-top:1px solid #f1f1f1;
  }
  .docker__item{
    flex: 1;
    text-align: center;
    padding-top: .03rem;
    .iconfont{
      font-size: 0.22rem;
    }
    .docker__title{
      font-size: .2rem;
      transform: scale(.5, .5);
    }
  }
  .docker__item_active{
      color: blueviolet;
    }
</style>
